Gadget Caja flotante de Facebook para su Sitio Web

Usted está luchando para conseguir más le gusta de facebook? Añadir un facebook flotante como la caja a tu blog o sitio web. El widget se mantiene en una posición fija en el lado derecho de su sitio. Al pasar la imagen azul sobre facebook, la caja como se desplazará y revelarse utilizando jQuery.

Ver demo

Se puede ver una demostración de este widget de Facebook en la parte derecha de esta página. Pase con el puntero del ratón sobre la imagen facebook. Debe aparecer una facebook como la caja.

Añadir widget a su sitio

Paso 1

Agregue el código siguiente en cualquier parte de la etiqueta body de su plantilla. O simplemente haga clic en el botón "añadir a la blogger" para los blogs de blogspot.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EZi3EuIrwVVc_ivzsgdEKWaXv6IVy7RbBPTVDxoVF6XoV2JdReNMoEiMNhXnuaZ6fjQ-m84nBgrRJRLPpob95Lt3P72Wqj1TAQl-04AazkZuQJ5vWaZ5615HMstJ6Ot7cz0C0kRBsvR5/") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><div class="theblogwidgets" style="">

<div>

 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftheblogwidgets&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe><span><center>

<a style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html">Blog</a></center>

</span></div>

</div>

Paso 2

Si el widget flotante facbook no está funcionando adecuadamente después del paso 1, entonces usted necesita para añadir jQuery para su sitio . Siga las instrucciones a continuación.

Ve a Diseño > Edición de HTML
Buscar <head> y justo debajo de él pega el siguiente código jQuery.

1

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'>

Cómo personalizar

¿Dónde encontrar el código?

Con el fin de encontrar el html ir al panel de Blogger > Layout . Haga clic en "editar" en el gadget "HTML / Javascript".

Introduzca su nombre de usuario facebook

Busque la línea de código abajo y reemplazar theblogwidgets lo que está en rojo con su propia página de Facebook Nombre de usuario.

Fuente: http://theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html#more-5

Twitter: https://twitter.com/Pablo_ATorres

19 /02/2016

Hazte fans en facebook